<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>

<head>
    <title>欢迎登录</title>

    <link href="${ctx}/statics/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="${ctx}/statics/styles/navbar.css" rel="stylesheet"/>
    <link href="${ctx}/statics/styles/icons.css" rel="stylesheet"/>


    <style>
        .input-group-addon {
            background-color: #ffffff !important;
        }

        .jcaptcha {
            border-width: 0px !important;
            padding-bottom: 0px !important;
            padding-top: 0px !important;
            background-color: #ffffff !important;
        }

        @media screen and (min-width: 769px) {
            .vcenter {
                display: inline-block;
                margin-top: 80px;
                float: none;
            }
        }

        @media (max-width: 768px) {
            .minScreenHide {
                display: none;
            }

            .login-form {
            }

            .login-form .form-group {
                margin-bottom: 0px;;
            }

            .help-block{
                margin-bottom:5px!important;
                margin-top:0px!important;
            }
            .vcenter {
                display: inline-block;
                margin-top: 10px;
                float: none;
            }

            .login-title {
                margin-left: 20px;
                margin-top: 5px;
                maring-bottom: 5px;
            }


            .remeber-me{
                margin-bottom: 10px!important;
            }

        }
    </style>
</head>

<body>

<div class="container vcenter">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
            <div class="bs-callout bs-callout-info minScreenHide">
                <h4>欢迎登录56联盟</h4>

                <p>登录后...</p>
                <ul>
                    <li>可以永久保存您在56联盟查询的单号</li>
                    <li>发货提醒、派物提醒、签收提醒、免费短信发送到您手机</li>
                    <li>您查询过的所有单号自动按已签收、未签收、疑难件分类、方便快捷</li>
                    <li>单号太多记不住？不用怕，我们还有单号备注功能</li>
                </ul>
            </div>

        </div>
        <div class="col-md-4">

            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-horizontal login-form" action="${ctx}/login" method="post">

                        <div class="row">
                            <div class="col-sm-offset-1"><h3 class="login-title">登录联盟56</h3></div>
                        </div>
                        <div class="form-group">
                            <label for="inputUsername" class="col-sm-3 control-label">用户:</label>

                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-group-addon"><span
                                            class="glyphicon glyphicon-user"></span></span>

                                    <input type="text" class="form-control" id="inputUsername" name="username" value='${username}'
                                           placeholder="手机号码或帐号">
                                </div>
                                <div class="help-block with-errors">
                                    <c:if test="${SPRING_SECURITY_LAST_EXCEPTION !=null && SPRING_SECURITY_LAST_EXCEPTION.message == 'Bad credentials'}">
                                        <div class="alert alert-danger">
                                            账号或密码错误
                                        </div>
                                    </c:if>

                                    <%=request.getParameter("username")%>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-3 control-label">密码:</label>

                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-group-addon"><span
                                            class="glyphicon glyphicon-lock"></span></span>
                                    <input type="password" class="form-control" name="password" id="inputPassword"
                                           placeholder="输入密码">
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">验证码:</label>

                            <div class=" col-sm-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="jcaptchaCode">

                                    <div class="input-group-addon jcaptcha">
                                        <img src="${ctx}/jcaptcha.jpg" style="vertical-align: middle;" id="captchaImg"
                                             title="点击更换验证码" onclick="javascript:refreshCaptcha();">

                                    </div>
                                </div>


                                <div class="help-block with-errors">
                                    <c:if test="${SPRING_SECURITY_LAST_EXCEPTION !=null&&(SPRING_SECURITY_LAST_EXCEPTION.message == '验证码不正确'|| SPRING_SECURITY_LAST_EXCEPTION.message=='验证码错误')}">
                                        <div class="alert alert-danger">
                                                ${SPRING_SECURITY_LAST_EXCEPTION.message}
                                        </div>
                                    </c:if>

                                </div>
                            </div>


                        </div>
                        <div class="form-group remeber-me">
                            <div class="col-sm-offset-3 col-sm-9">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="rememberme"> 下次自动登录(公共电脑慎用)
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-3">
                                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                                <button type="submit" class="btn btn-warning btn-block">登录</button>
                            </div>
                            <div class="list-inline">
                                <button type="button" onclick="javascript:location='/register'" class="btn btn-link">
                                    免费注册
                                </button>
                                |
                                <button type="button" class="btn btn-link">找回密码</button>

                            </div>
                        </div>

                    </form>
                    <div class="row">
                        <div class="col-sm-9">
                            <p class="text-muted">合作帐号登录:

                                <a href="#"><span class="glyphicon glyphicon-qq"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-weixin"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-sina"></span></a>
                                <a href="#"><span class="glyphicon glyphicon-taobao"></span></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="application/javascript" src="${ctx}/statics/js/jquery-3.1.1.min.js"></script>
<script type="application/javascript" src="${ctx}/statics/bootstrap/js/bootstrap.min.js"></script>

<script>
    function refreshCaptcha() {
        $('#captchaImg').hide().attr('src', '${ctx}/jcaptcha.jpg?' + Math.floor(Math.random() * 100)).fadeIn();
    }
    function validateLogin() {
        var username = $("#username").val();
        if (username == '') {
            $("#error").html("请输入用户名!");
            return false;
        }
        var password = $("#password").val();
        if (password == '') {
            $("#error").html("请输入密码!");
            return false;
        }
        var jcaptchaCode = $("#jcaptchaCode").val();
        if (jcaptchaCode == '') {
            $("#error").html("请输入验证码!");
            return false;
        }
        return true;
    }
</script>
</body>

</html>